<!DOCTYPE HTML>
<html>
    <head>
        <title>弹窗插件 - 测试</title>
        <meta name="renderer" content="webkit"/>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
        <link rel="icon" href=""/>
        <style type="text/css">
        html,body{padding:0;margin:0;background:#e2e2e2;}
        button{background-color:#2196F3;color:#ffffff;border:none;padding:5px 20px;margin:20px 0 0 20px;font-size:20px;}
        </style>
    </head>
    <body>
        <button class="btn-alert1">打开弹窗-双按钮</button>
        <br/>
        <button class="btn-alert2">打开弹窗-单按钮</button>
        <br/>
        <button class="btn-alert-notitle">打开弹窗-无标题</button>
        <br/>
        <button class="btn-msg">打开小提示</button>
        <br/>
        <button class="btn-frame">打开大弹窗-html内容</button>
        <br/>
        <button class="btn-frame2">打开大弹窗-iframe</button>
        <br/>
        <button class="btn-loading">打开加载动画</button>
        <br/>
        <button class="btn-success">成功弹窗</button>
        <br/>
        <button class="btn-error">失败弹窗</button>
        <br>
        <button class="btn-login">登陆弹窗</button>
        <script type="text/javascript" src="h5/mlayer.min.js"></script>
        <script type="text/javascript">
            var touch = function (cname, callback) {
                var elem = document.getElementsByClassName(cname)[0];
                elem.addEventListener("click", function (elem) {
                    callback.call(this, elem)
                }, !1);
            };
            touch('btn-alert1', function(elem) {
                mlayer.alert({
                    title: '标题',
                    content: '内容',
                    btn:['不了', '好的'],
                    yes: function(index) {
                        alert('你选择了好的');
                        mlayer.close(index);
                    }
                });
            });
            touch('btn-alert2', function(elem) {
                mlayer.alert({
                    title: '标题',
                    content: '内容',
                    btn: '好的'
                });
            });
            touch('btn-alert-notitle', function(elem) {
                mlayer.alert({
                    content: '内容',
                    btn: '好的'
                });
            });
            touch('btn-msg', function(elem) {
                mlayer.msg({
                    content: '这是一句话的小提示',
                    time: 3
                });
            });
            touch('btn-frame', function(elem) {
                mlayer.frame({
                    title: '标题内容',
                    content: '这是html内容'
                });
            });
            touch('btn-frame2', function(elem) {
                mlayer.frame({
                    title: '标题内容',
                    url: 'https://www.baidu.com'
                });
            });
            touch('btn-loading', function(elem) {
                mlayer.loading({
                    title: '加载中',
                    time: 3
                });
            });
            touch('btn-success', function(elem) {
                mlayer.success({
                    title: '成功',
                    time: 3
                });
            });
            touch('btn-error', function(elem) {
                mlayer.error({
                    title: '错误',
                    time: 3
                });
            });
            touch('btn-login', function(elem) {
                mlayer.login({
                    btn: ['我再看看', '立即登陆'],
                    yes: function(index) {
                        alert('你选择了立即登陆');
                        mlayer.close(index);
                    }
                });
            });
        </script>
    </body>
</html>
